<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css" rel="stylesheet">
    <title>WebSocket Test</title>
</head>
<body >
<div class="container">
    <h1>客户端:"T2"</h1>
    <div><input type="text" id="message" placeholder="Message"><button id="elementId">发送</button>
    </div>
    <div id="mine" style="color:#23A13E;width: 40%;margin: 20px auto;float: left;">我发送的：</div>
    <div id="output" style="color:#414D7A;width: 40%;margin: 20px auto;float: right;">我接收的：</div>

</div>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

<script type="text/javascript">

    $(function () {

        //判断浏览器是否支持WebSocket
        var supportsWebSockets = 'WebSocket' in window || 'MozWebSocket' in window;
        if (supportsWebSockets) {
            //建立WebSocket连接（ip地址换成自己主机ip）
            var  ws = new WebSocket("wss://localhost:6012/tunnel/T2/source");
            ws.onopen = function(){
                //当WebSocket创建成功时，触发onopen事件
                console.log("websocket连接成功");

            }
            ws.onmessage = function(e){
                //当客户端收到服务端发来的消息时，触发onmessage事件，参数e.data包含server传递过来的数据
                console.log("收到数据");
                console.log(e.data);
                $('#output').append('<p>'+e.data+'</p>');
            }
            ws.onclose = function(e){
                //当客户端收到服务端发送的关闭连接请求时，触发onclose事件
                console.log("websocket已断开");
            }
            ws.onerror = function(e){
                //如果出现连接、处理、接收、发送数据失败的时候触发onerror事件
                console.log("websocket发生错误"+e);
            }


        }else{

            layer.alert("您的浏览器不支持 WebSocket!");

        }

        $('#elementId').click(function() {
            var message = JSON.stringify({
                token: "T1",
                msg:$('#message').val()
            });
            $('#mine').append('<p>'+message+'</p>');
            ws.send(
                message
            );
        });
    });
</script>
</body>
</html>